<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态表格</title>
		<style type="text/css">
			table,
			td {
				border: 1px solid #000000;
				border-collapse: collapse;
				width: 800px;
				height: 50px;
				text-align: center;
			}

			a {
				text-decoration: none;
				color: #000000;
			}

			a:hover {
				color: #FF0000;
			}
		</style>
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_2855974_9khnedgkd9u.css" />
	</head>
	<body>
		<input type="button" value="添加一行" onclick="addLine()" />
		<input type="button" value="删除选中行" onclick="delLines()" />
		<input type="button" value="全选" onclick="selectAll()" />
		<input type="button" value="不选" onclick="selectNone()" />
		<input type="button" value="反选" onclick="selectReverse()" />
		<hr />
		<table>
			<tbody id="data">
				<tr>
					<td>
						<input class="ck" type="checkbox" />
					</td>
					<td></td>
					<td></td>
					<td>
						<!-- 把超链接的href屏蔽,然后通过事件来驱动函数,否则href中时没有事件对象的 -->
						<a class="iconfont icon-shanchu" href="javascript:void(0)" onclick="delLine(this)"></a>
					</td>
				</tr>
				<tr>
					<td>
						<input class="ck" type="checkbox" />
					</td>
					<td></td>
					<td></td>
					<td>
						<a class="iconfont icon-shanchu" href="javascript:void(0)" onclick="delLine(this)"></a>
					</td>
				</tr>
				<tr>
					<td>
						<input class="ck" type="checkbox" />
					</td>
					<td></td>
					<td></td>
					<td>
						<a class="iconfont icon-shanchu" href="javascript:void(0)" onclick="delLine(this)"></a>
					</td>
				</tr>
			</tbody>
		</table>

		<script>
			//添加一行
			function addLine() {
				data.innerHTML +=
					"<tr>\
					<td>\
						<input class='ck' type='checkbox' />\
					</td>\
					<td></td>\
					<td></td>\
					<td>\
						<a class='iconfont icon-shanchu' href='javascript:void(0)' onclick='delLine(this)'></a>\
					</td>\
				</tr>";

				//创建新行对象
				/* var tr = document.createElement("tr");
				//设置新单元格对象
				var td1 = document.createElement("td");
				//创建多选框对象
				var input = document.createElement("input");
				input.type = "checkbox";
				td1.appendChild(input);
				tr.appendChild(td1);
				
				var td2 = document.createElement("td");
				tr.appendChild(td2);
				
				var td3 = document.createElement("td");
				tr.appendChild(td3);
				
				var td4 = document.createElement("td");
				var ma = document.createElement("a");
				ma.href="javascript:void(0)";
				ma.textContent = "删除";
				td4.appendChild(ma);
				tr.appendChild(td4);
				data.appendChild(tr); */
			}

			//删除指定行
			function delLine(obj) {
				var r = confirm("确定要删除吗?");
				if (r) {
					//获取当前元素节点的父节点,再取父节点,a=>td=>tr
					var tr = obj.parentNode.parentNode;
					//删除指定子节点
					data.removeChild(tr);

					//补充: JS中也有根据下标直接删除行的方法: tableObject.deleteRow(index) 
				}
			}


			//删除选中行
			function delLines() {
				var checkboxes = document.getElementsByClassName("ck");
				for (var i = checkboxes.length - 1; i >= 0; i--) {
					if (checkboxes[i].checked) {
						data.removeChild(checkboxes[i].parentNode.parentNode);
					}
				}
			}

			//全选
			function selectAll() {
				var checkboxes = document.getElementsByClassName("ck");
				for (var i = checkboxes.length - 1; i >= 0; i--) {
					checkboxes[i].checked = true;
				}
			}

			//不选
			function selectNone() {
				var checkboxes = document.getElementsByClassName("ck");
				for (var i = checkboxes.length - 1; i >= 0; i--) {
					checkboxes[i].checked = false;
				}
			}

			//反选
			function selectReverse() {
				var checkboxes = document.getElementsByClassName("ck");
				for (var i = checkboxes.length - 1; i >= 0; i--) {
					if (checkboxes[i].checked) {
						checkboxes[i].checked = false;
					} else {
						checkboxes[i].checked = true;
					}
				}
			}
		</script>
	</body>
</html>
